<!DOCTYPE html>
<html>
<head>
	<title>Settings</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="../../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
	<script src="../../lib/jquery/jquery-1.9.1.js"></script>
	<script src="../../lib/mutation-summary/mutation_summary.js"></script>
	<script src='../../lib/jquery-plugins/textcomplete/jquery.textcomplete.js'></script>
	<script src="../../lib/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="../datamodel/Script.js"></script>
	<script type="text/javascript" src="OptionsPageController.js"></script>
	<script type="text/javascript" src="../common/utils/UrlUtils.js"></script>
	<script type="text/javascript" src="../datamodel/TargetWinDefinition.js"></script>
	<script type="text/javascript" src="../datamodel/Script.js"></script>
	<script type="text/javascript" src="../lib/custom/lang/Assert.js"></script>
	<script type="text/javascript" src="../lib/custom/lang/ObjectUtils.js"></script>
	<script type="text/javascript" src="../lib/custom/lang/StringUtils.js"></script>
	<script type="text/javascript" src="../lib/custom/lang/event/AbstractGenericEventHandler.js"></script>
	<script type="text/javascript" src="../lib/custom/dom/DomUtils.js"></script>
	<script type="text/javascript" src="../lib/custom/dom/CssUtils.js"></script>
	<script type="text/javascript" src="../lib/custom/dom/LinkWrapper.js"></script>
	<script type="text/javascript" src="../lib/custom/dom/ElementWrapper.js"></script>
	<script type="text/javascript" src="../lib/custom/ui/shortcuts/KeyCodeMapper.js"></script>
	<script type="text/javascript" src="../lib/custom/ui/shortcuts/ShortcutCommands.js"></script>
	<script type="text/javascript" src="../lib/custom/ui/shortcuts/AbstractShortcutManager.js"></script>
	<script type="text/javascript" src="../lib/custom/ui/shortcuts/Shortcutmanager2.js"></script>
	<script type="text/javascript" src="../lib/custom/ui/shortcuts/ShortStringManager.js"></script>
	<script type="text/javascript" src="../lib/custom/util/Utils.js"></script>
	<script type="text/javascript" src="autocomplete.js"></script>
	<script type="text/javascript" src="../api/enumerations.js"></script>
	<script type="text/javascript" src="../api/api_helper.js"></script>
	<script type="text/javascript" src="../api/shortcut.js"></script>
	<script type="text/javascript" src="../api/focus.js"></script>
	<script type="text/javascript" src="../api/click.js"></script>
	<script type="text/javascript" src="../api/list_view_handler.js"></script>
	<script type="text/javascript" src="../api/listview.js"></script>
	<link type="text/css" rel="stylesheet" href='../../lib/jquery-plugins/textcomplete/jquery.textcomplete.css'/>
	<style type="text/css">
	  .highlightRed{
	     color:red;
	  }
	  .redBorder{
	     border: 1px solid red;
	  }
	</style>
	
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h1>Customize your Web Settings</h1>
		</div>
		<div class="row">
			<div class="col-lg-3">
				<div class="row">
					<div class="col-lg-12 form-group">
						<label for="scriptFilter"><u>F</u>ilter</label>
						<div class="input-group">
							<input id="scriptFilter" type="text" class="form-control">
							<div class="input-group-btn">
								<button id="filterBtn" class="btn btn-default">Go</button>
							</div>
					    </div>
					</div>
				</div>
				<div class="row" style="max-height:650px; overflow-y:auto">
					<table id="scripts" class="table table-striped table-bordered">
						<tr>
							<td></td>
							<td><b>Script Name</b></td>
							<td align="center"><b><input type="checkbox" id="toggleAllChb"/></b></td>
						</tr>
					</table>
				</div>
				<div class="row">
					<div class="col-xs-12 form-group">
						<button id="exportBtn" class="btn btn-default">Export</button>
						<button id="importBtn" class="btn btn-default">Import</button>
					</div>				</div>
				<!-- /input-group -->
			</div>
			<div class="col-lg-9" id="scriptForm">
				<div id="alert" class="row hidden">
					<div class="col-lg-3">
					</div>
					<div class="col-lg-6">
						<div class="alert"></div>
					</div>
					<div class="col-lg-3">
					</div>
				</div>
				<div class="row">
					<div class="col-lg-7">
						<div class="form-group">
							<label for="scriptName">Script <u>N</u>ame</label> <input type="text"
								class="form-control" id="scriptName" placeholder="Script Name">
						</div>
					</div>
					<div class="col-lg-2">
						<div class="form-group" >
						   <label for="disabled"></label>
							<div class="checkbox">
						    <label>
						      <input type="checkbox" id="disabled"><label for="disabled">Disabled</label>
						    </label>
						  </div>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							<label for="uuid">UUId</label> <input type="text"
								class="form-control" id="uuid" readonly tabindex="-1">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<div class="input-group col-xs-12">
							<label for="urls">Include-/Exclude-URLs</label>
							<textarea id="urls" rows="4" class="form-control col-xs-12"></textarea>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<div class="input-group col-xs-12">
							<label for="onloadJSCode"><u>J</u>avaScript Code</label>
							<textarea id="onloadJSCode" rows="10" cols="200"
								class="form-control col-xs-12" style="white-space: pre;font-family:monospace"></textarea>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<button id="applyBtn" class="btn btn-default"><u>A</u>pply & Test</button>
						<button id="saveBtn" class="btn btn-default"><u>S</u>ave</button>
						<button id="deleteBtn" class="btn btn-default">De<u>l</u>ete</button>
						<button id="cancelBtn" class="btn btn-default"><u>C</u>ancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Model Export Dialog -->
	<div class="modal" id="exportDlg" >
	  <div class="modal-dialog" style="width:70%">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">Import / Export Scripts</h4>
	      </div>
	      <div class="modal-body">
	        <div class="container">
	        	<div class="row">
	        		<div class="col-xs-12 form-group">
	        			<div class="input-group col-xs-12">
	        				<label for="impExpJSON">Copy / Paste the code and save it with an external editor</label>
				        	<textarea id="impExpJSON" class="col-xs-12" rows="20" cols="100"></textarea>
				        </div>
	        		</div>
	        	</div>
	        </div>
	      </div>
	      <div class="modal-footer">
	        <button id="importBtnDlg" type="button" class="btn btn-default">Import</button>
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<iframe id="validate-iframe" style="display:none" src="validate_js_code.html"></iframe>
</body>
</html>
